<div class="row">
    	<div class="col-xs-12 col-sm-7 col-md-7 col-lg-4">
    <h1 class="page-title txt-color-blueDark"> 
			<i class="fa fa-table fa-fw "></i> 表格
		<span>
     > 普通表格 
</span>
	
</h1>
</div>
	
    <div class="col-xs-12 col-sm-5 col-md-5 col-lg-8">
    		<ul id="sparks" >
                <li class="sparks-info">
                    <h5> 个人收入 <span class="txt-color-blue">$47,171</span></h5>
				<div class="sparkline txt-color-blue hidden-mobile hidden-md hidden-sm">
                        1300, 1877, 2500, 2577, 2000, 2100, 3000, 2700, 3631, 2471, 2700, 3631, 2471
                
</div>
            
</li>
            <li class="sparks-info">
                    <h5> 站点流量 <span class="txt-color-purple"><i class="fa fa-arrow-circle-up" data-rel="bootstrap-tooltip" title="Increased"></i>&nbsp;45%</span></h5>
				<div class="sparkline txt-color-purple hidden-mobile hidden-md hidden-sm">
                        110,150,300,130,400,240,220,310,220,300, 270, 210
                
</div>
            
</li>
            <li class="sparks-info">
                    <h5> 站点夜间 <span class="txt-color-greenDark"><i class="fa fa-shopping-cart"></i>&nbsp;2447</span></h5>
				<div class="sparkline txt-color-greenDark hidden-mobile hidden-md hidden-sm">
                        110,150,300,130,400,240,220,310,220,300, 270, 210
                
</div>
            
</li>
        
</ul>
    
</div>

</div>

<section id="widget-grid" class="">
    	<div class="row">
    		<article class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
    			<div class="jarviswidget jarviswidget-color-blueDark" id="wid-id-0"
    				data-widget-editbutton="false"
				>
<header>
    <span class="widget-icon"><i class="fa fa-table"></i></span>    <h2>普通表格</h2>
    
</header>
				<div>
    					<div class="jarviswidget-editbox">
    
</div>
					<div class="widget-body ">
    		                <p>通过给表格<code>&lt;table&gt;</code>添加样式<code>.table-bordered</code> 来为表格添加边框样式。</p>
		                <div class="table-responsive">
		                    <table class="table table-bordered">
		                        <thead>
			                        <tr>
			                            <th>列名 1</th>
			                            <th>列名 2</th>
			                            <th>列名 3</th>
			                            <th>列名 4</th>
			                        </tr>
		                        </thead>
		                        <tbody>
			                        <tr>
			                            <td>行 1</td>
			                            <td>行 2</td>
			                            <td>行 3</td>
			                            <td>行 4</td>
			                        </tr>
			                        <tr>
			                            <td>行 1</td>
			                            <td>行 2</td>
			                            <td>行 3</td>
			                            <td>行 4</td>
			                        </tr>
			                        <tr>
			                            <td>行 1</td>
			                            <td>行 2</td>
			                            <td>行 3</td>
			                            <td>行 4</td>
			                        </tr>
			                        <tr>
			                            <td>行 1</td>
			                            <td>行 2</td>
			                            <td>行 3</td>
			                            <td>行 4</td>
			                        </tr>
			                        <tr>
			                            <td>行 1</td>
			                            <td>行 2</td>
			                            <td>行 3</td>
			                            <td>行 4</td>
			                        </tr>
			                        <tr>
			                            <td>行 1</td>
			                            <td>行 2</td>
			                            <td>行 3</td>
			                            <td>行 4</td>
			                        </tr>
		                        </tbody>
		                    </table>
		                </div>
					
</div>
 <!-- end widgetContent -->
				
</div>
 <!-- end jarvisWidgetBody -->
			
</div>
<!-- end widget -->
 <!-- end jarvisWidget -->
		
			<div class="jarviswidget jarviswidget-color-darken" id="wid-id-1"
    				data-widget-editbutton="false"
				>
<header>
    <span class="widget-icon"><i class="fa fa-table"></i></span>    <h2>No Padding</h2>
    
</header>
				<div>
    					<div class="jarviswidget-editbox">
    
</div>
					<div class="widget-body no-padding" id="">
    		                <div class="alert alert-info no-margin fade in">
    		                    <button class="close" data-dismiss="alert">×</button>
		                    <i class="fa fa-fw fa-info"></i>
							通过给表格 <code>&lt;table&gt;</code> 增加样式<code>.table-striped</code> 来为表格增加奇偶行不同背景风格。
		                
</div>
		                <div class="table-responsive">
		                    <table class="table table-bordered table-striped">
		                        <thead>
			                        <tr>
			                            <th>列名 1</th>
			                            <th>列名 2</th>
			                            <th>列名 3</th>
			                            <th>列名 4</th>
			                        </tr>
		                        </thead>
		                        <tbody>
			                        <tr>
			                            <td>行 1</td>
			                            <td>行 2</td>
			                            <td>行 3</td>
			                            <td>行 4</td>
			                        </tr>
			                        <tr>
			                            <td>行 1</td>
			                            <td>行 2</td>
			                            <td>行 3</td>
			                            <td>行 4</td>
			                        </tr>
			                        <tr>
			                            <td>行 1</td>
			                            <td>行 2</td>
			                            <td>行 3</td>
			                            <td>行 4</td>
			                        </tr>
			                        <tr>
			                            <td>行 1</td>
			                            <td>行 2</td>
			                            <td>行 3</td>
			                            <td>行 4</td>
			                        </tr>
			                        <tr>
			                            <td>行 1</td>
			                            <td>行 2</td>
			                            <td>行 3</td>
			                            <td>行 4</td>
			                        </tr>
			                        <tr>
			                            <td>行 1</td>
			                            <td>行 2</td>
			                            <td>行 3</td>
			                            <td>行 4</td>
			                        </tr>
		                        </tbody>
		                    </table> 
		                </div>
					
</div>
 <!-- end widgetContent -->
				
</div>
 <!-- end jarvisWidgetBody -->
			
</div>
<!-- end widget -->
 <!-- end jarvisWidget -->
		
</article>
 <!-- end widgetGridCol -->
		
		<article class="col-sm-12 col-md-12 col-lg-6">
    			<div class="jarviswidget jarviswidget-color-greenDark" id="wid-id-2"
    				data-widget-editbutton="false"
				>
<header>
    <span class="widget-icon"><i class="fa fa-table"></i></span>    <h2>表格浮动效果</h2>
    
</header>
				<div>
    					<div class="jarviswidget-editbox">
    
</div>
					<div class="widget-body no-padding" id="">
    		                <div class="alert alert-info no-margin fade in">
    		                    <button class="close" data-dismiss="alert">×</button>
		                    <i class="fa fa-fw fa-info"></i>
	                    	通过给表格<code>&lt;table&gt;</code> 增加样式<code>.table-hover</code>来为表格增加鼠标悬浮效果
		                
</div>
		                <div class="table-responsive"> 
		                    <table class="table table-hover">
		                        <thead>
			                        <tr>
			                            <th>#</th>
			                            <th>姓</th>
			                            <th>名</th>
			                            <th>用户名</th>
			                        </tr>
		                        </thead>
		                        <tbody>
			                        <tr>
			                            <td>1</td>
			                            <td>Mark</td>
			                            <td>Otto</td>
			                            <td>@mdo</td>
			                        </tr>
			                        <tr>
			                            <td>2</td>
			                            <td>Jacob</td>
			                            <td>Thornton</td>
			                            <td>@fat</td>
			                        </tr>
			                        <tr>
			                            <td>3</td>
			                            <td>Larry</td>
			                            <td>the Bird</td>
			                            <td>@twitter</td>
			                        </tr>
			                        <tr>
			                            <td>4</td>
			                            <td>Wise</td>
			                            <td>Man</td>
			                            <td>@myorange</td>
			                        </tr>
		                        </tbody>
		                    </table>
		                </div>
					
</div>
 <!-- end widgetContent -->
				
</div>
 <!-- end jarvisWidgetBody -->
			
</div>
<!-- end widget -->
 <!-- end jarvisWidget -->
		
</article>
 <!-- end widgetGridCol -->
		
		<article class="col-sm-12 col-md-12 col-lg-6">
    			<div class="jarviswidget jarviswidget-color-greenLight" id="wid-id-3"
    				data-widget-editbutton="false"
				>
<header>
    <span class="widget-icon"><i class="fa fa-table"></i></span>    <h2>每行都有颜色的表格</h2>
    
</header>
				<div>
    					<div class="jarviswidget-editbox">
    
</div>
					<div class="widget-body no-padding" id="">
    						<div class="alert alert-info no-margin fade in">
    <button class="close" data-dismiss="alert">×</button>
    <i class="fa fa-fw fa-info"></i>
	                    	 通过为你的TR和TD <code>&lt;tr&gt;</code>添加样式<code>.success</code>, <code>.danger</code>, <code>.warning</code> 和 <code>.info</code> 来指定背景颜色
		                
</div>
		                <div class="table-responsive">
		                    <table class="table">
		                        <thead>
			                        <tr>
			                            <th>#</th>
			                            <th> <i class="fa fa-building"></i>
 产品</th>
			                            <th> <i class="fa fa-calendar"></i>
 付款时间</th>
			                            <th> <i class="glyphicon glyphicon-send"></i> 状态</th>
			                        </tr>
		                        </thead>
		                        <tbody>
			                        <tr class="success">
			                            <td>1</td>
			                            <td>TB - Monthly</td>
			                            <td>01/04/2012</td>
			                            <td>已批准</td>
			                        </tr>
			                        <tr class="danger">
			                            <td>2</td>
			                            <td>TB - Monthly</td>
			                            <td>02/04/2012</td>
			                            <td>拒绝</td>
			                        </tr>
			                        <tr class="warning">
			                            <td>3</td>
			                            <td>TB - Monthly</td>
			                            <td>03/04/2012</td>
			                            <td>未明确</td>
			                        </tr>
			                        <tr class="info">
			                            <td>4</td>
			                            <td>TB - Monthly</td>
			                            <td>04/04/2012</td>
			                            <td>需要电话确认</td>
			                        </tr>
		                        </tbody>
		                    </table>
		                </div>
					
</div>
 <!-- end widgetContent -->
				
</div>
 <!-- end jarvisWidgetBody -->
			
</div>
<!-- end widget -->
 <!-- end jarvisWidget -->
		
</article>
 <!-- end widgetGridCol -->
	
</div>
 <!-- end widgetGridRow -->
	
	<div class="row">
    		<article class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
    			<div class="jarviswidget " id="wid-id-4"
    				data-widget-editbutton="false"
				>
<header>
    <span class="widget-icon"><i class="fa fa-table"></i></span>    <h2>Condenced table + combined prev. classes </h2>
    
</header>
				<div>
    					<div class="jarviswidget-editbox">
    
</div>
					<div class="widget-body no-padding" id="">
    						<div class="alert alert-warning no-margin fade in">
    	                        <button class="close" data-dismiss="alert">×</button>
							<i class="fa fa-fw fa-info"></i>
							可以通过为表格<code>&lt;table&gt;</code>增加样式 <code> .table-bordered .table-striped .table-condensed .table-hover .smart-form .has-tickbox </code>来应用组合效果
	                    
</div>
	                    <div class="table-responsive">
	                        <table class="table table-bordered table-striped table-condensed table-hover smart-form has-tickbox">
	                            <thead>
		                            <tr>
		                                <th><label class="checkbox">
	<input type="checkbox"   id=""  name="checkbox-inline"   placeholder="" >
	 <i></i> 
</label>
</th>
		                                <th>列名 1 <a href="javascript:void(0);" class="btn btn-xs btn-default pull-right"><i class="fa fa-filter"></i>
</a> </th>
		                                <th>列名 2<a href="javascript:void(0);" class="btn btn-xs btn-default pull-right"><i class="fa fa-filter"></i>
</a></th>
		                                <th>列名 3<a href="javascript:void(0);" class="btn btn-xs btn-default pull-right"><i class="fa fa-filter"></i>
</a></th>
		                                <th>列名 4<a href="javascript:void(0);" class="btn btn-xs btn-default pull-right"><i class="fa fa-filter"></i>
</a></th>
		                            </tr>
	                            </thead>
	                            <tbody>
		                            <tr>
		                                <td><label class="checkbox">
	<input type="checkbox"   id=""  name="checkbox-inline"   placeholder="" >
	 <i></i> 
</label>
</td>
		                                <td>行 1</td>
		                                <td>行 2</td>
		                                <td>行 3</td>
		                                <td>行 4</td>
		                            </tr>
		                            <tr>
		                                <td><label class="checkbox">
	<input type="checkbox"   id=""  name="checkbox-inline"   placeholder="" >
	 <i></i> 
</label>
</td>
		                                <td>行 1</td>
		                                <td>行 2</td>
		                                <td>行 3</td>
		                                <td>行 4</td>
		                            </tr>
		                            <tr>
		                                <td><label class="checkbox">
	<input type="checkbox"   id=""  name="checkbox-inline"   placeholder="" >
	 <i></i> 
</label>
</td>
		                                <td>行 1</td>
		                                <td>行 2</td>
		                                <td>行 3</td>
		                                <td>行 4</td>
		                            </tr>
		                            <tr>
		                                <td><label class="checkbox">
	<input type="checkbox"   id=""  name="checkbox-inline"   placeholder="" >
	 <i></i> 
</label>
</td>
		                                <td>行 1</td>
		                                <td>行 2</td>
		                                <td>行 3</td>
		                                <td>行 4</td>
		                            </tr>
		                            <tr>
		                                <th><label class="checkbox">
	<input type="checkbox"   id=""  name="checkbox-inline"   placeholder="" >
	 <i></i> 
</label>
</th>
		                                <td>行 1</td>
		                                <td>行 2</td>
		                                <td>行 3</td>
		                                <td>行 4</td>
		                            </tr>
		                            <tr>
		                                <td><label class="checkbox">
	<input type="checkbox"   id=""  name="checkbox-inline"   placeholder="" >
	 <i></i> 
</label>
</td>
		                                <td>行 1</td>
		                                <td>行 2</td>
		                                <td>行 3</td>
		                                <td>行 4</td>
		                            </tr>
	                            </tbody>
	                        </table>
	                    </div>
					
</div>
 <!-- end widgetContent -->
				
</div>
 <!-- end jarvisWidgetBody -->
			
</div>
<!-- end widget -->
 <!-- end jarvisWidget -->
		
</article>
 <!-- end widgetGridCol -->
	
</div>
 <!-- end widgetGridRow -->

</section>
 <!-- end widgetGrid -->

<script type="text/javascript">
	/* DO NOT REMOVE : GLOBAL FUNCTIONS!
	 *
	 * pageSetUp(); WILL CALL THE FOLLOWING FUNCTIONS
	 *
	 * // activate tooltips
	 * $("[rel=tooltip]").tooltip();
	 *
	 * // activate popovers
	 * $("[rel=popover]").popover();
	 *
	 * // activate popovers with hover states
	 * $("[rel=popover-hover]").popover({ trigger: "hover" });
	 *
	 * // activate inline charts
	 * runAllCharts();
	 *
	 * // setup widgets
	 * setup_widgets_desktop();
	 *
	 * // run form elements
	 * runAllForms();
	 *
	 ********************************
	 *
	 * pageSetUp() is needed whenever you load a page.
	 * It initializes and checks for all basic elements of the page
	 * and makes rendering easier.
	 *
	 */

	pageSetUp();
	
	/*
	 * ALL PAGE RELATED SCRIPTS CAN GO BELOW HERE
	 * eg alert("my home function");
	 * 
	 * var pagefunction = function() {
	 *   ...
	 * }
	 * loadScript("js/plugin/_PLUGIN_NAME_.js", pagefunction);
	 * 
	 * TO LOAD A SCRIPT:
	 * var pagefunction = function (){ 
	 *  loadScript(".../plugin.js", run_after_loaded);	
	 * }
	 * 
	 * OR
	 * 
	 * loadScript(".../plugin.js", run_after_loaded);
	 */

	// PAGE RELATED SCRIPTS

	// pagefunction
	
	var pagefunction = function() {
		
	};
	
	// end pagefunction
	
	// run pagefunction on load

	pagefunction();

</script>